<script type="text/ecmascript-6">
import { state } from '@/views/actuatorManagement/actuatorState';
import {
  updataTable,
  createTable,
  checkTask,
  deleteTable
} from './event';
import Dialog from './components/Dialog';
export default {
  components: {
    Dialog
  },
  data() {
    return {
      tableHeight: 0,
      rowNow: {},
      isDialogShow: false,
      currentIndex: -1,
      uploading: false, // dialog加载样式
      state
    };
  },

  mounted() {
    this.tableHeight = this.$refs['ActuatorManagement-table-container'].offsetHeight;
  },

  methods: {
    addRow() {
      this.rowNow = {};
      this.isDialogShow = true;
    },

    dialogClose() {
      this.isDialogShow = false;
    },

    handleSizeChange(v) {
      state.pageSize = v;
    },

    handleCurrentChange(v) {
      state.currentPage = v;
    },

    dialogDeal({ type, row }) {
      this.uploading = true;
      if (type === 'edit') {
        updataTable(row).then(res => {
          this.uploading = false;
          if (res) {
            this.state.table.data.splice(this.currentIndex, 1, row);
            this.dialogClose();
          }
        }, () => {
          this.uploading = false;
        });
      } else {
        // add row
        createTable(row).then(res => {
          this.uploading = false;
          if (res) {
            this.dialogClose();
            // 重新请求表格数据
            this.state.currentPage = 1;
          }
        }, () => {
          this.uploading = false;
        });
      }
    }
  },

  render() {
    const confirmTodo = (str) => {
      return this.$confirm(str, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return Promise.resolve();
      }, () => {
        return Promise.reject();
      });
    };

    const editClick = ({ $index, row }) => {
      this.currentIndex = $index;
      this.rowNow = row;
      this.isDialogShow = true;
    };
    const delClick = (scope) => {
      const { $index, row } = scope;
      row.isDelLoading = true;
      checkTask(row.id).then(res => {
        let str = '是否立刻删除该执行器?';
        // 有待执行任务
        if (res) {
          str = `
                该执行器下还存在执行任务，如果删除该执行器同时
                会清空对应所有任务，
                是否继续删除该执行器?
                `;
        }
        confirmTodo(str).then(
          () => {
            deleteTable(row).then(res => {
              if (res) {
                this.state.table.data.splice($index, 1);
              }
            });
          },
          () => {
            row.isDelLoading = false;
          }
        );
      });
    };
    const scopedSlots = {
      default: function(scope) {
        return (
          <div class='btn-content'>
            <el-button onClick={() => editClick(scope)} size='small' type='primary' >编辑</el-button>
            <el-button loading={scope.row.isDelLoading} size='small' type='danger' onClick={() => delClick(scope)}>删除</el-button>
          </div>
        );
      }
    };
    const { handleSizeChange, handleCurrentChange } = this;
    return (
      <div class='ActuatorManagement model-content'>
        <div class='ActuatorManagement-head'>
          <el-button onClick={this.addRow} type='primary' icon='el-icon-plus' >添加执行器</el-button>
        </div>
        <div ref='ActuatorManagement-table-container' class='ActuatorManagement-table-container'>
          {this.tableHeight !== 0 && (
            <el-table
              header-cell-style={this.state.table.headerCellStyle}
              cell-style={this.state.table.cellStyle}
              data={this.state.table.data}
              v-loading={this.state.table.loading}
              max-height={this.tableHeight}
              header-row-class-name='header-row'
              border
              style='width: 100%'>
              {state.table.tableHead.map((item, index) => {
                return (
                  <el-table-column
                    key={index}
                    width={index === 0 ? 120 : null}
                    prop={item.key}
                    label={item.title}
                  />
                );
              })}
              <el-table-column scopedSlots={scopedSlots} label='操作'>
              </el-table-column>
            </el-table>
          )}
        </div>
        <div class='ActuatorManagement-foot'>
          <el-pagination
            background
            on={{
              'size-change': (n) => handleSizeChange(n),
              'current-change': (n) => handleCurrentChange(n)
            }}
            currentPage={state.currentPage}
            page-sizes={state.pageSizes}
            page-size={state.pageSize}
            layout={state.pageLayout}
            total={state.total}
          />
        </div>
        <Dialog
          isShow={this.isDialogShow}
          uploading={this.uploading}
          rowNow={this.rowNow}
          ondialogClose={this.dialogClose}
          ondialogDeal={this.dialogDeal}
        />
      </div>
    );
  }
};
</script>

<style lang="less" scoped>
.ActuatorManagement {
  padding: 20px;

  .ActuatorManagement-table-container {
    margin-top: 40px;
    height: calc(100% - 40px - 30px - 40px);
  }

  .ActuatorManagement-foot {
    padding: 10px;
  }
}
</style>
